<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我在江湖等你</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body {
				width: 1024px;
				position: absolute;
				left: 50%;
				margin-left: -600px;
				border: 100px solid red;
				border-image-source: url(img/0.9jpg.jpg);
				border-image-width: 10px;
				border-image-slice: 213;
				border-image-repeat: round;
			}
			#bxo {
				width: 800px;
				margin: 0 auto;
			}
/* 			#header {
				margin-top: 20px;
			}

			#rheaders {
				float: right;
			} */
			#main {
				height: 40px;
				margin-top: -50px;
			}
			#main li {
				float: left;
				list-style: none;
				margin-right: 10px;
			}
			#main li:first-child {
				color: #0F3975;
				border-bottom: #0F3975 solid 1px;
			}
			#main li a {
				text-decoration: none
			}
			#main li a:hover {
				text-decoration: none
			}
			#section {
				height: 770px;
				border-top: 2px solid #f5f4f4;
				border-bottom: 2px solid #f5f4f4;
			}
			#left {
				width: 500px;
				float: left;
				height: 750px;
				padding: 0px 40px 20px 50px;
				border-right: 2px solid #f5f4f4;
			}
			h1 {
				color: red;
				margin-top: 20px;
				width: 500px;
				font-size: 28px;
				text-shadow: 2px 2px 10px blue;
			}
			h2 {
				margin-top: 15px;
				width: 500px;
				font-size: 15px;
			}
			h3 {
				margin-top: 15px;
				text-indent: 2em;
				width: 500px;
				font-size: 20px;
			}
			h4 {
				margin-top: 15px;
			}
			h4 img{
				width: 500px;
			}
			h5 {
				margin-top: 15px;
				text-indent: 2em;
				width: 500px;
				font-size: 20px;
			}
			#right {
				width: 220px;
				float: left;
				height: 750px;
				padding: 0 0 0 12px;
				margin-top: 20px;
				margin-left: 50px;
			}
			span a {
				color: red;
				text-decoration: none
			}
			span a:hover {
				text-decoration: none
			}
			#right p {
				font-size: 12px;
				border-bottom: 1px solid #d0c3c3;
				padding: 10px 0;
			}
			#right img {
				margin-top: 25px;
				width: 300px;
				height: 150px;
			}
			#right img:hover {
				box-shadow: 0px 0px 100px 0px #CCD1D7, 0px 0px 100px 0px #CCD1D7;
				position: relative;
				top: -10px;
			}
			#footer {
				text-align: center;
			}
			.all {
				width: 600px;
				height: 300px;
				padding: 7px;
				border: 1px solid #ccc;
				margin: 100px auto;
				position: relative;
			}
			.screen {
				width: 600px;
				height: 300px;
				overflow: hidden;
				position: relative;
			}
			.screen li {
				width: 600px;
				height: 300px;
				overflow: hidden;
				float: left;
			}
			.screen ul {
				position: absolute;
				left: 0;
				top: 0px;
				width: 3000px;
			}
			.all{
				margin-top: -50px;
			}
			.all ol {
				position: absolute;
				right: 10px;
				bottom: 10px;
				line-height: 20px;
				text-align: center;
			}
			.all ol li {
				float: left;
				width: 20px;
				height: 20px;
				background: #fff;
				border: 1px solid #ccc;
				margin-left: 10px;
				cursor: pointer;
			}
			.all ol li.current {
				background: yellow;
			}
			/*#arr {display: none;}*/
			#arr span {
				width: 40px;
				height: 40px;
				position: absolute;
				left: 5px;
				top: 50%;
				margin-top: -20px;
				background: #000;
				cursor: pointer;
				line-height: 40px;
				text-align: center;
				font-weight: bold;
				font-family: '黑体';
				font-size: 30px;
				color: #fff;
				opacity: 0.3;
				border: 1px solid #fff;
			}
		</style>
	</head>
	<body>
		<div id="bxo">
			<!-- 头部 -->
<!-- 			<div id="headers">
				<div id="header">
					<img src="img/0.9jpg.jpg">
				</div>
				<div id="rheaders"></div> -->
				<div class="all" id="all">
					<div class="screen" id="screen">
						<ul id="ul">
							<li><img src="img/0.9jpg.jpg" width="600" height="300" /></li>
							<li><img src="img/124.jpg" width="600" height="300" /></li>
							<li><img src="img/125.jpg" width="600" height="300" /></li>
							<li><img src="img/126.jpg" width="600" height="300" /></li>
							<li><img src="img/127.jpeg" width="600" height="300" /></li>
						</ul>
						<ol></ol>
					</div>
				</div>
			</div>
			<!-- 主要内容 -->
			<div id="main">
				<ul>
					<li><a href="">江湖新闻</a></li>
					<li>副本新闻</li>
					<li>武道新闻</li>
					<li>角色新闻</li>
				</ul>
			</div>
			<!-- 文本 -->
			<div id="section">
				<div id="left">
					<h1>2021年江湖会武大会，蓝鲸获大中华区“最佳武会”奖</h1>
					<h2>蓝鲸 2021-04-14</h2>
					<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae eum doloribus quis aliquam
						temporibus similique at consequatur quibusdam nam nemo cum id sit magni nostrum impedit minima
						porro. Mollitia fugit.</h3>
					<h4><img src="img/u=1383910270,2096094764&fm=26&fmt=auto.webp">
						<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae porro officiis quam
							necessitatibus incidunt nihil dolore id optio nostrum molestiae soluta distinctio vitae
							aliquam quidem alias corporis cum atque ab?</h5>
				</div>
				<div id="right">
					<span><a href="https://yanyu.huijiwiki.com/wiki/">江湖官网<<<点我看攻略></a></span>
					<img src="img/0.6jpg.jpg" />
					<p>燕王府身为90级副本，实力非常之强横</p>
					<img src="img/download.jpg" />
					<p>你也可以邀请更多江湖美女与你共赴江湖</p>
					<img src="img/0.5jpg.jpg" />
					<p>柳妹妹的天赋是可望不可及的，加血可以更好的过副本</p>
				</div>
			</div>
			<!-- 结尾 -->
			<div id="footer">
				<p>版权：蓝鲸科技</p>
			</div>
		</div>

	</body>
</html>
<script>
	//需求：无缝轮播图
	//步骤：
	//1.老三步。获取相关元素。
	//2.补齐相互盒子
	//1.复制第一张图片所在的li，填入所在的ul中。
	//2.生成相关的ol中的li。
	//3.点亮第一个ol中的li。
	//3.鼠标放到小方块儿上，轮播图片。
	//4.添加定时器。
	//5.左右切换的按钮。
	//1.老三步。获取相关元素。
	var box = document.getElementById("all");
	var ul = box.children[0].children[0];
	var ol = box.children[0].children[1];
	var ulLiArr = ul.children;
	//2.补齐相互盒子
	//1.复制第一张图片所在的li，填入所在的ul中。
	var newLi = ulLiArr[0].cloneNode(true);
	ul.appendChild(newLi);
	//2.生成相关的ol中的li。
	for (var i = 0; i < ulLiArr.length - 1; i++) {
		var newOlLi = document.createElement("li");
		newOlLi.innerHTML = i + 1;
		ol.appendChild(newOlLi);
	}
	//3.点亮第一个ol中的li。
	var olLiArr = ol.children;
	ol.children[0].className = "current";
	//3.鼠标放到小方块儿上，轮播图片。
	for (var i = 0; i < olLiArr.length; i++) {
		olLiArr[i].index = i;
		olLiArr[i].onmouseover = function() {
			for (var j = 0; j < olLiArr.length; j++) {
				olLiArr[j].className = "";
			}
			olLiArr[this.index].className = "current";
			animate(ul, -this.index * ul.children[0].offsetWidth);
			key = square = this.index;
		}
	}
	//4.添加定时器。
	var timer = null;
	var key = 0;
	var square = 0;
	timer = setInterval(autoPlay, 3000);

	function autoPlay() {
		key++;
		square++;
		if (key > olLiArr.length) {
			key = 3;
			ul.style.left = 0;
		}
		animate(ul, -key * ul.children[0].offsetWidth);

		square = square > olLiArr.length - 1 ? 0 : square;
		for (var j = 0; j < olLiArr.length; j++) {
			olLiArr[j].className = "";
		}
		olLiArr[square].className = "current";
	}
	//5.鼠标移开开启定时器，鼠标放上去开启定时器。
	box.onmouseover = function() {
		clearInterval(timer);
	}
	box.onmouseout = function() {
		timer = setInterval(autoPlay, 1000);
	}
	//6.左右切换的按钮。
	var btnArr = box.children[0].children[1].children;
	btnArr[0].onclick = function() {
		key--;
		square--;
		if (key < 0) {
			key = 4;
			ul.style.left = -5 * ul.children[0].offsetWidth + "px";
		}
		animate(ul, -key * ul.children[0].offsetWidth);


		square = square < 0 ? olLiArr.length - 1 : square;
		for (var j = 0; j < olLiArr.length; j++) {
			olLiArr[j].className = "";
		}
		olLiArr[square].className = "current";
	}
	btnArr[1].onclick = function() {
		autoPlay();
	}
	//  基本封装
	function animate(obj, target) {
		clearInterval(obj.timer);
		var speed = obj.offsetLeft < target ? 15 : -15;
		obj.timer = setInterval(function() {
			var result = target - obj.offsetLeft;
			obj.style.left = obj.offsetLeft + speed + "px";
			if (Math.abs(result) <= 15) {
				obj.style.left = target + "px";
				clearInterval(obj.timer);
			}
		}, 10);
	}
</script>
